<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="top">
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">1</view>
                <text class="steps-text">实名信息</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" style="border-color:#cccccc"/>
                <view class="steps" style="background:#cccccc">2</view>
                <text class="steps-text" style="color: #cccccc">绑定银行卡</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" style="border-color: #cccccc"/>
                <view class="steps" style="background: #cccccc">3</view>
                <text class="steps-text" style="color: #cccccc">开户成功</text>
            </view>
        </view>
        <view class="bottom-one">
            <view class="input-wrap">
                <text class="input-key">姓名</text>
                <input v-model="name"  maxlength="10" placeholder="请输入姓名"/>
            </view>
            <view class="input-wrap">
                <text class="input-key">身份证号</text>
                <input v-model="idCard" type="number"  maxlength="18" placeholder="请输入身份证号"/>
            </view>
        </view>
        <button type="warn" class="sub-button" @click="next">
           下一步
        </button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name:'',
                idCard:'',
            }
        },
        onLoad() {

        },
        methods: {
            next() {
                if(!this.name){
                    uni.showModal({
                        title: '提示',
                        content:  '请输入您的姓名',
                        showCancel: false,
                    });
                    return
                }
                if(!this.idCard){
                    uni.showModal({
                        title: '提示',
                        content:  '请输入您的身份证号',
                        showCancel: false,
                    });
                    return
                }
                if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard))) {
                    uni.showModal({
                        title: '提示',
                        content: '请输入正确的身份证',
                        showCancel: false,
                    });
                    return
                }
                let stepsData={trueName:this.name,idCard:this.idCard,token:uni.getStorageSync('token')}
                uni.setStorage({
                    key: 'stepsData',
                    data: JSON.stringify(stepsData),
                    success: function () {
                        uni.navigateTo({
                            url: '../steps/index3'
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }

    .top {
        width: 100%;
        height: 95upx;
        background: white;
        display: flex;
        padding-top: 25upx;
        justify-content: space-around;
    }
    .steps-wrap{
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 33.34%;
    }
    .steps-line{
        width: 33.34%;
        border-bottom: 2px solid #DC5C4B;
        position: absolute;
        margin-top: 25upx;
    }
    .steps {
        z-index:1;
        width: 50upx;
        height: 50upx;
        background: #DC5C4B;
        border-radius: 40upx;
        color: rgba(255, 255, 255, 1);
        font-size: 32upx;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .steps-text{
        font-size: 28upx;
        font-family: PingFangSC-regular;
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
    .bottom-one{
        width: 100%;
        color: #647482;
        background: white;
        margin-top: 40upx;
        border-top: 1px solid rgba(227, 227, 227, 1);
    }
    .input-wrap{
        display: flex;
        justify-content: space-between;
        padding: 0 3%;
        border-bottom: 1px solid rgba(227, 227, 227, 1);
    }
    .input-key{
        font-size: 32upx;
        color: #64727f;
        line-height: 112upx;
    }
    input{
        padding:30upx 0;
        color: #5e93c6;
        font-size: 28upx;
        text-align: right;
        font-family: PingFangSC-regular;
        display: inline-block;
    }
</style>
